<template>
 <div>
   <!-- 头部 -->
<van-nav-bar fixed >
  <template #left>
    <img  class="logo" src="@/assets/logo.png" alt="">
  </template>
  <template #right>
    <van-icon name="search" size="0.48rem"
    @click="moveSerachPageFn"
    color="#fff" />
  </template>
</van-nav-bar>
<div class="main">
<!-- tab栏 -->
<van-tabs  v-model="channelId"
 offset-top="1.226667rem"
 swipeable
 animated
 @change="channelchangeFn"
 sticky>

  <van-tab
  v-for="item in arr" :key="item.id"
  :name="item.id"
  :title="item.name">

  <!-- 文章组件 -->
  <ArticleList :channelId="channelId"></ArticleList>
  </van-tab>

</van-tabs>
<van-icon name="plus" size="0.37333334rem" @click="showPopup"  class="moreChannels"/>
</div>
  <van-popup v-model="show" class="channel_popup"  get-container="body">
    <ChannelEdit :userList="arr" :unCheckList="unCheckChannelList"
    @addchannelEV = "addchannelFn"
    @removeChannelEV ="removeChannelFn"
    @closeEV="closeFn"
    ref="editRef"
    v-model="channelId"

    ></ChannelEdit>

  </van-popup>
 </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelsAPI, updateChannelsAPI, removeTheChannelAPI } from '@/api'
import ArticleList from '@/views/Home/components/ArticleList'
import ChannelEdit from './ChannelEdit.vue'
export default {
  data () {
    return {
      channelId: 0,
      arr: [],
      allChannelList: [],
      show: false,
      channelScrollTObj: {} // 保存每个频道滚动条的位置
      // {推荐频道id :滚动距离, 切换的频道id :滚动的距离}
    }
  },

  async created () {
    // 频道列表
    const res = await getUserChannelsAPI()
    console.log(res)
    this.arr = res.data.data.channels

    //  所有频道列表
    const res2 = await getAllChannelsAPI()
    this.allChannelList = res2.data.data.channels
  },
  methods: {
    showPopup () {
      this.show = true
    },
    async addchannelFn (channelObj) {
      this.arr.push(channelObj)

      const newArr = this.arr.filter(obj => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj }
        delete newObj.name
        newObj.seq = index

        return newObj
      })
      const res = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    async removeChannelFn (channelObj) {
      const index = this.arr.findIndex(obj => obj.id === channelObj.id)
      this.arr.splice(index, 1)

      const res = await removeTheChannelAPI({
        channelId: channelObj.id
      })
      console.log(res)
    },
    closeFn () {
      this.show = false
      // 我要让内部编辑状态回归false
      this.$refs.editRef.isEidt = false
    },
    moveSerachPageFn () {
      this.$router.push('/search')
    },
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop || document.body.scrollTop
      // 同时保存当前频道的滚动距离
      this.channelScrollTObj[this.channelId] = document.documentElement.scrollTop || document.body.scrollTop
    },
    channelchangeFn () {
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollTObj[this.channelId]
      })
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  computed: {
    unCheckChannelList () {
      const newArr = this.allChannelList.filter(bigObj => {
        const index = this.arr.findIndex(smallObj => {
          return smallObj.id === bigObj.id
        })
        // 如果找到了
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
      return newArr
    }
  },
  // 只有使用keep-alive 的组件才有这两个周期函数
  // 切回来
  activated () {
    // window 和 document 监听网页滚动事件
    // html标签 获取 scrollTop , 滚动距离,和设置滚动位置,
    // 立刻设置,滚动条位置
    window.addEventListener('scroll', this.scrollFn)
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },
  // 切走
  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  }
  // 先切走了,滚动条回到顶部,才触发了deactivated失焦,所以拿不到滚动位置了
}
</script>

<style scoped lang="less">
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.logo{
  width: 100px;
  height: 30px;
}
.main{
  padding-top: 46px;
}
.channel_popup{
  width: 100%;
  height: 100%;
}
</style>
